<template>
  <div>
    <div class="search-container">
      <div class="input-wrapper" :class="{'active': isActive}">
        <input type="text" class="search-input" placeholder="请输入你要查询的商家" v-model="searchText" @focus="handleFocus"
          @blur="handleBlur" />
        <div class="underline"></div>
      </div>
      <button class="search-button" @click="search">
        <span class="button-text">搜索</span>
      </button>
    </div>
    <div v-for="(merchant, index) in merchants" :key="index">
      <div class="container">
        <div class="top">
          <div class="left">
            <p>商家姓名: {{ merchant.B_Name }}</p>
            <p>商家编号: {{ merchant.B_ID }}</p>
          </div>
          <div class="right">
            <p>商家性别: {{ merchant.B_Sex }}</p>
          </div>
        </div>
        <div class="bottom">
          <div class="password-row">
            <p class="password-label">密码:</p>
            <div class="password-input-wrapper">
              <input type="text" v-model="merchant.B_Password" :class="{ 'password-input-border': passwordFocused }"
                class="password-input" @focus="passwordFocused = true" @blur="passwordFocused = false">
            </div>
          </div>
          <div class="submit-row">
            <button @click="submitPassword(merchant)" class="submit-button">
              <span class="button-word">提交</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  export default {
    data() {
      return {
        merchants: [], // 商家信息数组
        searchText: '',
        isActive: false,
        passwordFocused: false,
      }
    },
    mounted() {
      this.fetchAllData()
      // this.fetchMerchants(); // 获取商家数据
    },
    methods: {
      search() {
        // 搜索逻辑
      },
      handleFocus() {
        this.isActive = true
      },
      handleBlur() {
        if (this.searchText === '') {
          this.isActive = false
        }
      },
      submitPassword(merchant) {
        // 处理密码提交逻辑
        // 发送请求将修改的密码提交到数据库
        uni.request({
            url: 'http://127.0.0.1:3007/api/updateBusin',
            method: 'POST',
            data: {
              id: merchant.B_ID, // 商家编号
              name: merchant.B_Name,
              password: merchant.B_Password, // 修改后的密码
            },
            header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', },
          })
          .then(resp => {
            // 请求成功处理逻辑
            console.log('密码提交成功:', resp)
          })
          .catch(error => {
            // 请求失败处理逻辑
            console.error('密码提交失败:', error)
          })
        console.log('商家密码:', merchant.B_Password)
      },
      async fetchAllData() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/businList',
          method: 'GET',
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', },
        })
        if (res.status === 0) {
          this.merchants = res.data
          console.log('merchants:', this.merchants)
        }


      },
      // async fetchMerchants() {
      // 	try {
      // 		// 使用你提供的 fetch 请求来从后台获取商家数据
      // 		const response = await uni.request({
      // 			url: 'http://127.0.0.1:3007/api/updateBusin',
      // 			method: 'POST',
      // 			data: {
      // 				name: this.name,
      // 				password: this.password,
      // 			},
      // 			header: {
      // 				'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      // 			},
      // 		});

      // 		// 解析并存储商家数据到 merchants 数组
      // 		const {
      // 			data
      // 		} = response;
      // 		this.merchants = data;

      // 		// 在控制台打印商家数据
      // 		console.log('商家数据:', this.merchants);
      // 	} catch (error) {
      // 		console.error('获取商家数据失败:', error);
      // 	}
      // },
    },
  }
</script>

<style scoped>
  /* 最上方搜索框样式样式 */
  .search-container {
    display: flex;
    align-items: center;
  }

  .input-wrapper {
    position: relative;
  }

  .search-input {
    border: none;
    outline: none;
    background-color: transparent;
    padding: 5px;
    font-size: 16px;
    width: 200px;
  }

  .underline {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #000;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .active .underline {
    transform: scaleX(1);
    background-color: peru;
  }

  .search-button {
    margin-left: 10px;
    background-color: #ffc0cb;
    color: palevioletred;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    height: 30px;
  }

  .button-text {
    position: relative;
    top: -12px;
    font-family: "SimSun", "STFangsong", "FangSong", "serif";
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* 下方显示的页面样式样式 */
  .container {
    width: 80%;
    max-width: 400px;
    margin-top: 20px;
    margin-left: 10px;
    padding: 20px;
    border-radius: 10px;
    background-color: lightgoldenrodyellow;
  }

  .top {
    display: flex;
    justify-content: space-between;
  }

  .left {
    text-align: left;
  }

  .right {
    text-align: right;
    margin-right: 5px;
  }

  .bottom {
    margin-top: 30px;
  }

  .password-row {
    display: flex;
    align-items: center;
  }

  .password-label {
    margin-right: 10px;
    text-size: 20px;
  }

  .password-input-wrapper {
    flex: 1;
    position: relative;
  }

  .password-input {
    height: 15px;
    width: 90%;
    margin-right: 20px;
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  .password-input-border {
    border: 2px solid pink;
  }

  .submit-row {
    margin-top: 10px;
    text-align: center;
  }

  .submit-button {
    padding: 8px 16px;
    background-color: skyblue;
    color: plum;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 40%;
    height: 40px;
  }

  .button-word {
    position: relative;
    bottom: 10px;
    text-shadow: #000;
  }
</style>